<template>
  <div>
    <h2>{{counter}}</h2>
    <h2>{{doubleCounter}}</h2>
    <button @click="increment">加</button>
    <button @click="decrement">减</button>

    <h2>{{data}}</h2>
    <button @click="changeData">修改data</button>

    <p class="content"></p>

    <div class="scroll">
      <div class="scroll-x">Scrollx:{{scrollX}}</div>
      <div class="scroll-y">Scrolly:{{scrollY}}</div>
    </div>

    <div class="mouse">
      <div >mouseX:{{mouseX}}</div>
      <div >mouseY:{{mouseY}}</div>
    </div>
  </div>
</template>

<script>
import useCounter from "@/07_compositionAPI的练习/hook/useCounter";
import useTitle from "@/07_compositionAPI的练习/hook/useTitle";
import useScrollPosition from "@/07_compositionAPI的练习/hook/useScrollPosition";
import useMousePosition from "@/07_compositionAPI的练习/hook/useMousePosition";
import useLocaiStorage from "@/07_compositionAPI的练习/hook/useLocaiStorage";

export default {
  //将逻辑代码抽到hook中使用
  setup(){
    //逻辑全变为hook的调用

    //counter
    const { counter,doubleCounter,increment,decrement} = useCounter();

    //title
    const titleRef = useTitle("wmy");
    setTimeout(() =>{
      titleRef.value = "love wj"
    },3000)


    //滚动位置
    const {scrollX,scrollY } = useScrollPosition();

    //鼠标位置
    const { mouseX , mouseY} = useMousePosition();

    //保存数据
    const data = useLocaiStorage("info");
    const changeData = () => {
        data.value = "哈哈哈哈"
    }

    return{
      counter, doubleCounter, increment, decrement,
      scrollX, scrollY,
      mouseX,mouseY,
      data,changeData
    }
  }
}
</script>

<style scoped>
  .content{
    width: 3000px;
    height: 5000px;
  }

  .scroll {
    position: fixed;
    right: 30px;
    bottom: 30px;
  }

  .mouse {
    position: fixed;
    right: 30px;
    bottom: 80px;
  }
</style>